<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>02渐变</title>
		<style type="text/css">
			#firCan {
				display: block;
				border: 1px solid khaki;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="firCan" width="1000" height="500">
			您的浏览器版本过低, 不支持Canvas, 请升级!
		</canvas>
	</body>
	<script type="text/javascript">
		// 1, 获取Canvas
		var firCan = document.getElementById("firCan");
		// 2, 获取 2d渲染上下文
		var context = firCan.getContext('2d');
		
		/*
		 * 渐变:
		 * 	1, 线性渐变: createLinearGradient(x0, y0, x1, y1)
		 * 	四个参数:
		 * 		x0 和 y0		确定渐变起点的位置
		 * 		x1 和 y1 	确定渐变终点的位置
		 */
		var lineGrd = context.createLinearGradient(0, 0, 0, firCan.height);
		/*
		 * 设置渐变颜色: addColorStop(offset, color)
		 * 两个参数:
		 * 		offset 	颜色的偏移值(0 代表起点, 1代表终点)
		 * 		color	渐变的颜色值
		 */
		lineGrd.addColorStop(0, 'red');
		lineGrd.addColorStop(1, 'blue');
		
		// 3, 绘制矩形
		context.fillStyle = lineGrd;
		context.fillRect(0, 0, firCan.width, firCan.height);
		context.strokeStyle = lineGrd;
		context.lineWidth = 50;
		context.strokeRect(0, 0, firCan.width, firCan.height);
		
		/*
		 * 清除 Canvas
		 */
		firCan.width = 1000;
		firCan.height = 500;
		
		/*
		 * 2, 放射渐变: createRadialGradient(x0, y0, r0, x1, y1, r1)
		 * 六个参数:
		 * 	x0, y0 和 r0		确定起始圆的圆心和半径
		 * 	x1, y1 和 r1		确定结束圆的圆心和半径
		 */
		var radGrad = context.createRadialGradient(100, 100, 200, 700, 300, 100);
		radGrad.addColorStop(0, 'red');
		radGrad.addColorStop(0.25, 'green');
		radGrad.addColorStop(0.5, 'blue');
		radGrad.addColorStop(0.75, 'yellow');
		radGrad.addColorStop(1, 'pink');
		
		context.fillStyle = radGrad;
		context.fillRect(0, 0, firCan.width, firCan.height);
		
		
	</script>
</html>
